<template>
  <div class="member-index">
    <div class="i_tabs">
      <div class="i_tabs-item" :class="{ 'i_tabs-item' : tabIndex === item.index }" 
        v-for="item in tabList" :key="item.index" 
        @click="tabIndex = item.index">
        <img class="i_tabs-item_left" :src="prefixOssUrl(item.imgUrl)" />
        <div class="i_tabs-item_right">
          <p class="i_tabs-item_right--name">{{item.name}}（人）</p>
          <p class="i_tabs-item_right--quantity">{{item.quantity}}</p>
        </div>
      </div>
    </div>
    <div class="i_query">
      <div class="i_query_left">
        <div class="i_query_left-item">
          <span>搜索会员</span>
          <n-input type="text" style="width:380px" placeholder="请输入会员姓名/电话" clearable />
        </div>
        <div class="i_query_left-item">
          <span>生日时间</span>
          <n-date-picker style="width:200px" type="month" clearable />
        </div>
        <button class="i_query_left-reset">重置</button>
      </div>
      <div class="i_query_right">
        <button class="i_query_right-btn">
          <span class="iconfont icon-zhuce"></span>
          添加会员
        </button>
        <button class="i_query_right-btn">
          <span class="iconfont icon-yonghuzhuanyi"></span>
          会员挪动
        </button>
      </div>
    </div>
    <div class="i_nav">
      导航：<span>李嘉贤</span><span class="iconfont icon-youjiantou i_nav-icon"></span><button>返回一级</button>
    </div>
    <div class="i_table">
      <n-data-table :striped="true" :columns="columns" :data="data" :max-height="580" bordered />
    </div>
    <div class="i_pagination">
      <n-pagination :page-count="100">
        <template #prev>
          上一页
        </template>
        <template #next>
          下一页
        </template>
        <template #suffix>
          <div class="i_pagination__jump-page">
            到<input type="number">页
            <button>确认</button>
          </div>
        </template>
      </n-pagination>
    </div>
    <message-drawer></message-drawer>
  </div>
</template>

<script setup>
import { h, ref, reactive, provide, inject } from 'vue';
import { useRouter} from 'vue-router';
import { NButton } from "naive-ui";
import messageDrawer from './@fragment/message.vue';
const router = useRouter();

const tabIndex = ref(1);
const { prefixOssUrl } = inject('globalMethods')
const tabList = reactive([{
  imgUrl: 'member/all-icon.png',
  name: '全部会员',
  quantity: 12312,
  index: 1
},
{
  imgUrl: 'member/supreme-icon.png',
  name: '至尊会员',
  quantity: 12312,
  index: 2
},
{
  imgUrl: 'member/market-icon.png',
  name: '市场股东',
  quantity: 12312,
  index: 4
}
])

let messageDrawerActive = ref(false);
provide('messageDrawerActive', messageDrawerActive);

const columns = [{
  title: '会员姓名',
  key: 'name',
  width: 200
},
{
  title: '会员电话',
  key: 'mobile'
},
{
  title: '会员类型',
  key: 'type'
},
{
  title: '生日时间',
  key: 'shop',
},
{
  title: '会员人数',
  key: 'shop',
},
{
  title: '邀请码',
  key: 'shop',
},
{
  title: '操作',
  key: 'actions',
  width: 450,
  fixed: 'right',
  render (row) {
    return [
      h(
        NButton, {
        size: 'small',
        type: 'info',
        secondary: true,
        style: 'height:44px',
        onClick: () => {

        }
      }, {
        default: () => "查看会员"
      }
      ),
      h(
        NButton, {
        size: 'small',
        type: 'success',
        secondary: true,
        style: 'height:44px;margin:0 10px',
        onClick: () => {
          messageDrawerActive.value = true
        }
      }, {
        default: () => "发送短信"
      }
      ),
      h(
        NButton, {
        size: 'small',
        type: 'info',
        secondary: true,
        style: 'height:44px',
        onClick: () => {
          router.push('/member/supreme')
        }
      }, {
        default: () => "查看详情"
      }
      )
    ]
  }
}
]
const data = reactive([
  {
    key: 0,
    name: 'John Brown',
    mobile: 32,
    type: '至尊会员',
    shop: 'New York No. 1 Lake Park'
  }
])

</script>

<style lang="less">
.member-index {
  display: flex;
  flex-direction: column;
  height: 100%;
  .i_tabs {
    display: flex;
    align-items: center;
    padding: 30px;
    &-item {
      display: flex;
      align-items: center;
      width: 208px;
      height: 66px;
      padding: 10px;
      margin-right: 20px;
      border: 1px solid #e5e5e5;
      border-radius: 4px;
      &_left {
        width: 64px;
        height: 64px;
        margin-right: 10px;
      }
      &_right {
        display: flex;
        flex-direction: column;
        align-items: center;
        &--name {
          font-size: 18px;
          font-weight: 500;
          color: #2e323d;
          text-align: center;
        }
        &--quantity {
          font-size: 24px;
          color: #4a5060;
          text-align: center;
        }
      }
    }
  }
  .i_query {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    &_left {
      display: flex;
      align-items: center;
      height: 60px;
      margin: 20px 0;
      &-item {
        display: flex;
        align-items: center;
        &:nth-child(1) {
          margin-right: 60px;
        }
        > span {
          margin-right: 20px;
          font-size: 26px;
          font-weight: 500;
          color: #2e323d;
        }
      }
      &-reset {
        width: 114px;
        height: 60px;
        margin-left: 20px;
        font-size: 26px;
        font-weight: 500;
        color: #4a5060;
        background: #f8f8f8;
        border: 1px solid #aaa;
        border-radius: 5px;
      }
    }
    &_right {
      &-btn {
        width: 168px;
        height: 60px;
        font-size: 24px;
        font-weight: 400;
        color: #fff;
        border-radius: 5px;
        &:nth-child(1) {
          margin-right: 20px;
          background: #1981f4;
        }
        &:nth-child(2) {
          background: #fe9900;
        }
        >span {
          font-size: 28px;
        }
      }
    }
  }
  .i_nav {
    height: 60px;
    margin-bottom: 30px;
    padding-left: 30px;
    line-height: 60px;
    font-size: 24px;
    color: #2e323d;
    background: #f8f8f8;
    > span {
      color: #2c8cf0;
    }
    > button {
      width: 128px;
      height: 44px;
      margin-left: 20px;
      color: #FE9A2A;
      background: #fcf4e8;
      border: 1px solid #fe9a2a;
      border-radius: 5px;
    }
    &-icon {
      font-size: 28px;
    }
  }
  .i_table {
    flex: 1;
    padding: 0 30px;
  }
  .i_pagination {
    display: flex;
    align-items: center;
    height: 128px;
    padding: 0 30px;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.2);
    &__jump-page {
      font-size: 26px;
      color: #4a5060;
      margin: 0 18px;

      input {
        margin: 0 15px;
        width: 64px;
        height: 42px;
        background: #f8f8f8;
        border: 1px solid #e5e5e5;
        border-radius: 5px;
        text-align: center;
      }

      button {
        margin: 0 30px;
        width: 88px;
        height: 44px;
        color: #fdfdfd;
        background: #2c8cf0;
        border-radius: 5px;
      }
    }
  }
}
</style>
